<template>
	<g-page :is-tabbar="true">
		
		<view style="width: 100%; height: auto; overflow: hidden;"><image mode="widthFix" class="top"></image></view>

		<view class="content">
				
				<textarea @blur='areaBlur' :focus="onFocus" fixed="false" name='tfanlt' :value="tfanlt" class="textarea" placeholder="这一刻的想法......"
				 maxlength="200"></textarea>
				<!-- <u-upload :action="action" :file-list="fileList"></u-upload> -->
				<view class='img'>
					<view class='add'>
						<view v-for="item in imgArr" :key="index">
							<image @click="imgYu" :data-list="item.path_server" :data-src="item.path_server" :src="item.path_server"></image>
						</view>
						<image src='../../static/image/fbu.jpg' @click='chooseImage' mode="aspectFit"></image>
					</view>
				</view>
				<view style="height: 100rpx;"></view>
				<view class="br"></view>

				<u-select v-model="show" :list="sec==1 ? list_add:list_fac" @confirm="confirm"></u-select>
				<!-- <view @tap="liste(1)" class="list-cell">
					<view>所在位置</view>
					<view style="margin-left: 30upx;">{{addfac}}</view>
					<u-icon class="icon" size="20" name="arrow-right"></u-icon>
				</view> -->
				<picker @change="choiceLocation" :value="index" :range="locationArray">
					<view class="list-cell">
						<view >所在位置</view>
						<view class="sss" style="margin-left: 45rpx;">{{location}}</view>
						<u-icon class="icon" size="20" name="arrow-right"></u-icon>
					</view>
				</picker>

				<view class="br"></view>
				<!-- <view @tap="liste(2)" class="list-cell">
					<view>发布类型</view>
					<view style="margin-left: 30upx;">{{facility}}</view>
					<u-icon class="icon" size="20" name="arrow-right"></u-icon>
				</view> -->
				<picker @change="bindPickerChange" :value="index" :range="facilityArray">
					<view class="list-cell">
						<view >发布类型</view>
						<view class="sss" style="margin-left: 45rpx;">{{facility}}</view>
						<u-icon class="icon" size="20" name="arrow-right"></u-icon>
					</view>
				</picker>
				<view class="br"></view>
				<view style="margin-top: 80rpx;"></view>
				<u-button :custom-style="{width:'300rpx'}" @click="issueSubmit()" type="error">发布</u-button>
				<view style="height: 200rpx;"></view>

		</view>

	</g-page>
</template>


<script>
	import {
		releaseInformation
	} from "@api"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Vue from "vue"
	export default {
		name: "issue",
		data() {
			return {
				imgArr: [], //图片数组
				chooseViewShow: true,
				ImgNumber: 3, //单次可选图片个数
				urls: [],
				facilityArray: ['动态', '表白墙'],
				locationArray: ['校内','校外'],
				facility: '请选择',
				location: '请选择',
				issueType: 0, //发布类型
				locationType: 0,
				userType: 1, //用户类型
				tfanlt: '', // 内容描述
				isShowTextarea: false,
				onFocus: false,
				userInfo:{} ,//用户信息
				token: ""

			}
		},
		computed: {
			...mapState(['USER'])
		},
		onLoad() {
			this.userInfo = this.USER.userInfo;
		},
		methods: {
			//提交信息
			issueSubmit() {
				let that = this;
				let datas = {};
				datas.userId = that.userInfo.id;
				datas.createBy = that.userInfo.username;
				//datas.userId = 1;
				//datas.createBy = "admin";
				datas.issueType = that.issueType;
				datas.issueImags = that.urls;
				datas.userType = that.userType;
				datas.content = that.tfanlt; 
				datas.verifyStatus = '0';	//审核状态
				if (this.USER.token == 2 || this.USER.token == 1 || this.USER.token == '') {
					uni.showToast({
						title: '请先认证',
						icon: 'none',
						type: 'warning'
					});
					return;
				} else if (datas.issueType == "") {
					uni.showToast({
						title: '请选择发布类型',
						icon: 'none',
						type: 'warning'
					})
				} else if (this.locationType == "") {
					uni.showToast({
						title: '请选择所在位置',
						icon: 'none',
						type: 'warning'
					})
				} else if (datas.content == "") {
					uni.showToast({
						title: '发布内容不能为空',
						icon: 'none',
						type: 'warning'
					})
				} else {
					uni.showLoading({
						title: '发布中...',
						mask: 'true'
					})
					setTimeout(function() {
						uni.hideLoading() //关闭加载页面
					}, 10000)

					releaseInformation({datas})
					.then(res=>{
					  if (res == 1) {
					  	uni.hideLoading() //关闭加载页面
					  	uni.showToast({
					  		title: '发布成功,等待管理员审核！',
					  		type: 'success'
					  	})
					  	setTimeout(that.toMain, 1000);
					  } else {
					  	uni.showToast({
					  		title: '发布失败，请检查网络重新发布',
					  		icon: 'none',
					  		type: 'warning'
					  	})
					  }
					})
					
				}
			},
			toMain() {
				uni.reLaunch({
					url: '/pages/dynamics/dynamics',
				})
			},
			// 描述框切换
			clickText() {
				let that = this;
				that.isShowTextarea = true;
				that.onFocus = true;
			},

			areaBlur(e) {
				// console.log('失去焦点')
				let that = this;
				let value = e.detail.value;
				that.onFocus = false;
				that.isShowTextarea = false;
				that.tfanlt = value;
			},
			//发布类型
			bindPickerChange: function(e) {
				let facilityArray = this.facilityArray;
				this.issueType = e.detail.value,
					this.facility = facilityArray[e.detail.value]
			},
			//所在位置
			choiceLocation: function(e) {
				let locationArray = this.locationArray;
				this.locationType = e.detail.value,
				this.location = locationArray[e.detail.value]
			},
			/** 选择图片 */
			chooseImage() {
				var that = this;
				var upload_picture_list = this.imgArr
				console.log(this.imgArr.length)
				if (this.imgArr.length == 3) {
					uni.showToast({
						title: "最多上传三张图片",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				uni.chooseImage({
					count: this.ImgNumber - this.imgArr.length, //最多选择4张图片
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						var tempFiles = res.tempFiles
						for (var i in tempFiles) {
							tempFiles[i]['upload_percent'] = 0
							tempFiles[i]['path_server'] = ''
							upload_picture_list.push(tempFiles[i])
						}
						if (res.tempFilePaths.count == 0) {
							return;
						}
						//上传图片
						console.log("upload_picture_list:", upload_picture_list)
						that.imgArr = upload_picture_list
						//this.up_data(upload_picture_list); //data
						that.chooseViewShow1() //判断是否隐藏添加
						that.uploadFile(upload_picture_list); //开始上传
					}
				})
			},
			up_data(obj) {
				this.imgArr = obj
			},
			uploadFile(imgArr) {
				//循环把图片上传到服务器 并显示进度   
				for (var j in imgArr) {
					if (imgArr[j]['upload_percent'] == 0) {
						this.upload_file_server(imgArr, j)
					}
				}
			},

			upload_file_server(upload_picture_list, j) {
				//图片上传
				let that = this
				const uplyk = uni.uploadFile({
					url: Vue.prototype.$t.URL.api + "/message/uploadimg",
					filePath: upload_picture_list[j]['path'], //上传的文件本地地址 
					name: 'multipartFile',
					success: function(res) {
						console.log(res);
						let data = JSON.parse(res.data);
						if (data.result == true) {
							var filename = Vue.prototype.$t.URL.image+"/" + data.url; //存储地址 显示
							that.urls = that.urls.concat(filename)
							upload_picture_list[j]['path_server'] = upload_picture_list[j].path;
						} else {
							//var filename = "/assets/images/714.png" //错误图片 显示
							//upload_picture_list[j]['path_server'] = filename;
						}
						that.up_data(upload_picture_list)
					}
				})
				//上传 进度方法
				uplyk.onProgressUpdate((res) => {
					upload_picture_list[j]['upload_percent'] = res.progress;
					this.up_data(upload_picture_list)
				})
			},
			/** 是否隐藏图片选择 */
			chooseViewShow1() {
				if (this.imgArr.length >= this.ImgNumber) {
					this.chooseViewShow = false
				} else {
					this.chooseViewShow = true
				}
			},
			/** 显示图片 */
			showImage(e) {
				let imgArr = this.imgArr;
				let itemIndex = e.currentTarget.dataset.id;
				let img = [];
				for (var i = 0; i < imgArr.length; i++) {
					img.push(imgArr[i].path);
				}
				wx.previewImage({
					current: img[itemIndex] // 当前显示图片的http链接
				})

			},
			//图片点击事件
			imgYu(event) {
				console.log(event);
				var src = event.currentTarget.dataset.src; //获取data-src
				var imgList = [event.currentTarget.dataset.list]; //获取data-list
				//图片预览
				wx.previewImage({
					current: src, // 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				})
			},
			//下拉刷新显示提示语
			onPullDownRefresh: function() {
				this.setData({
					showView: true, //这个是我判断提醒语的显示，我在page里设置变量是true
				})
				setTimeout(() => {
					this.setData({
						showView: false,
					})
					wx.hideNavigationBarLoading() //完成停止加载
					wx.stopPullDownRefresh() //停止下拉刷新
				}, 1000)
			}
		}
	}
</script>
<style>
	.top {
		width: 120%;
		height: 140rpx;
		margin-left: -30rpx;
	}

	.content {
		padding: 0 20rpx;
		background: #ffffff;
	}

	.textarea {
		width: 100%;
		/* background: #007AFF; */
		height: 200rpx;
		padding: 10rpx 0;
		margin-top: 20rpx;
	}

	.list-cell {
		display: flex;
		position: relative;
		width: 100%;
		height: 80rpx;
		background: #ffffff;
		line-height: 80rpx;
		padding-left: 10rpx;
	}

	.br {
		margin: 0 auto;
		width: 96%;
		height: 2rpx;
		background: #efeff0;
	}

	.icon {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
	.sss{
		position: absolute;
		/* top: 30rpx; */
		right: 60rpx;
	}
	/* 添加照片 */
	.img {
		display: flex;
		flex-wrap: wrap;
	}
	
	.add {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		background-color: #fff;
		height: 160rpx;
	}
	
	.add image {
		margin-right: 8rpx;
		width: 160rpx;
		height: 160rpx;
	}
</style>
